<template>
    <div>
        <ul>
            <li class="first">
                <router-link to="/home/movement">总运动</router-link>
            </li>
            <li>
                <router-link to="/home/walking">健走</router-link>
            </li>
            <li>
                <router-link to="/home/run">跑步</router-link>
            </li>
            <li>
                <router-link to="/home/riding">骑行</router-link>
            </li>
            <router-link to="/home" class="a1">
                <i class="iconfont">&#xe614;</i>
            </router-link>
            <span @click="quit" class="tuichu">
                <p class="p1">{{username}}</p>
                <p class="p2">注销</p>
            </span>
        </ul>
        
    </div>
</template>
<script>
export default {
    name:'TopNav',
    data(){
        return{
            username:''
        }
    },
    mounted(){
        this.username=localStorage.getItem('username');
    },
    methods: {
        quit(){
            /*删除localStorage*/
            localStorage.removeItem('username')
            this.$router.push("/login")
        }
    }
}
</script>
<style scoped  lang="less">
a{
    text-decoration: none;
    font-size: 15px;
    color: #fff;
}
ul{
    height: 50px;
    background: #181818;
    
    .first{
        margin-left: 31px;
    }
    li{
        list-style: none;
        float: left;
        margin-right:36px;
        text-align: center;
        line-height: 50px;
        font-size: 14px;
    }
    i{
        display: inline-block;
        position: relative; 
        top:-4px;
        font-size: 25px;
        line-height: 50px;
        color: #fff;
    }
}
.tuichu{
    width: 25px;
    height: 100%;
    display: inline-block;
    font-size: 10px;
    color:#fff;
    margin-left: 4px;
    margin-top: 10px;
    p{
        text-align: center;
    }
}
.active{
    color:#Fddf05;
    position: relative;
}
.a1::after{
    content: "";
    display: block;
    width: 50px;
    height: 4px;
    position: absolute;
    top: 20px;
    left: 0;
    background-color: #171818 !important;
}
.active::after{
    content: "";
    display: block;
    width: 100%;
    height: 2px;
    position: absolute;
    top: 31px;
    left: 0;
    background-color: #Fddf05;
}
</style>